let smallBox= document.querySelector('.smallBox');

let mask= document.querySelector('.mask');

let box= document.querySelector('.box');
let big= document.querySelector('.bigBox');


let bigBox= document.querySelector('.bigBox img');
let smallimg= document.querySelector('.smallBox img');

let btn= document.getElementsByTagName("li");

console.log(btn);



//给smallBox添加鼠标移动事件

smallBox.onmousemove = function(e) {

    //box的外边距，后面x相减目的为了抵消掉margin
    
    var MaxX = parseInt(window.getComputedStyle(box, null)["marginLeft"]);
    
    var MaxY = parseInt(window.getComputedStyle(box, null)["marginTop"]);
    
    //得到遮罩层的一半宽高，让鼠标跟着遮罩层中间走
    
    var maskX = -(mask.offsetWidth / 2);
    
    var maskY = -(mask.offsetHeight / 2);
    
    var x = e.clientX - smallBox.offsetLeft - MaxX + maskX;
    
    var y = e.clientY - smallBox.offsetTop - MaxY + maskY;
    
    //设置x,y最小值
    
    x = x < 0 ? 0 : x;
    
    y = y < 0 ? 0 : y;
    
    //设置x,y最大值
    
    x = x > smallBox.offsetWidth - mask.offsetWidth ? smallBox.offsetWidth - mask.offsetWidth : x;
    
    y = y > smallBox.offsetHeight - mask.offsetHeight ? smallBox.offsetHeight - mask.offsetHeight : y;
    
    mask.style.left = x + "px";
    
    mask.style.top = y + "px";
    
    //求大图片移动的距离
    
    //遮罩层最大移动距离/遮罩层左偏移量 = 大图盒子最大移动距离/大图盒子左偏移量
    
    //大图盒子移动距离 = 大图盒子最大移动距离*遮罩层左偏移量 /遮罩层最大移动距离
    
    var bigX = (bigBox.offsetWidth - big.offsetWidth) * x / (smallimg.offsetWidth - mask.offsetWidth);
    
    var bigY = (bigBox.offsetHeight - big.offsetHeight) * y / (smallimg.offsetHeight - mask.offsetHeight);
    
    bigBox.style.marginLeft = -bigX + "px";
    
    bigBox.style.marginTop = -bigY + "px";
    
    }






 

/*
smallBoxBox.addEventListener('mouseenter', function(){
    mask.style.display='block';
    
});


smallBoxBox.addEventListener('mouseleaver', function(){
    mask.style.display='none';


});

let offsetleft= box.offsetLeft;
let offsetTop= box.offsetTop;

let offsetHeight= box.offsetHeight;
let offsetWidth= box.offsetWidth;

smallBoxBox.addEventListener('mousemove', function(e){

   

    let left=e.pageX - offsetleft -50 ;
    let top=e.pageY - offsetTop -50;

    if(left<0){
        left=0;

    }

    if(top<0){
        top=0;}


    let maxw= offsetWidth -50;
    let maxh=offsetHeight -100;



    if(left >=maxw){
        left=maxw;

    }

    if(top >=maxh){
            top=maxh;}


    var prpleft=left /maxw;
    var prptop=top /maxh;

    movebig(prpleft,prptop)

    console.log(prpleft,prptop)


    mask.style.left= left+'px';
    mask.style.top=top+'px';

  


   


});

function movebig(prpleft,prptop){
    maxh= 800-400;
    maxw= 800-400;


    bigBox.style.left= maxw*prpleft + 'px';
    bigBox.style.top= maxh*prptop + 'px';

}

*/





//选项卡

var list=[{imge:"./images/cw1.png"},{
    imge:"./images/cw2.png"
},

{
    imge:"./images/cw3.png"
},

{
    imge:"./images/cw4.png"
},];
 for(var i=0;i< btn.length;i++){
    btn[i].addEventListener('click',change)

 }


 function clearchange(){
    for(var i=0;i< btn.length;i++){
        btn[i].classList.remove('active');
    }
 }


 function change(){
    clearchange();
    this.classList.add('active');


    let index= getIndex(btn, this);

    box.children[0].src=list[index].imge;






}


function getIndex(arr,obj){

    for(var i=0;i<arr.length;i++){
        if(arr[i]===obj){
            return i;
        }
    }
    return -1;




}





